<!--Generate by Kevin's CodeBuilder -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
		<meta charset="UTF-8">
		<title>工作流管理系统</title>
		<head  th:replace="source::header"></head>
		<style type="text/css">
				.form_main_wrap{
					position:relative;
					height:100%;
					width:100%;
				}
				.form_main_wrap > div{
					height:100%;
					width:100%;
					position:absolute;
					top:0;
					left:0;
					overflow:auto;
				}
				#tree_wrap{
					width:350px;
					z-index:2;
					border-right:1px dashed #ccc;
				}
				#func_wrap{
					z-index:1;
					border-left:350px solid #fff;
					padding-left:0px;					
				}
				.form_main_wrap > div > h1{
					border-bottom:1px dashed #ccc;
					line-height:34px;
				}
				#func_list{
					padding: 12px 20px;
				}
				.fun_model_title{
					font-weight: bold;
					padding: 12px 24px;
					text-align: left;
				}
				.f_model_div{
					border-bottom: 1px dashed #c6c6c6;
				}
		</style>
</head>
<body>
		<div class="form_main_wrap">
			<div id="tree_wrap" class="k_box_size">
				<h1 style="text-align:center;height: 34px;position: absolute;top:0;width: 100%;z-index: 6">[(${Lang.role_menu_tree})]</h1>
				<div class="k_box_size" style="width:100%;height:100%; position:absolute;top:0;left:0;z-index:5;overflow: auto;border-top:34px solid #fff;">
						<ul id="tree"></ul>
				</div>
			</div>
			<div id="func_wrap" class="k_box_size">
				<h1 style="padding-left:20px">
					<span style="padding-right:14px">[(${Lang.role_func_list})]</span>
					<label id="chkAll" class="k_checkbox_label k_checkbox_anim"><input type="checkbox"  value=""><i class="k_checkbox_i"></i>全选</label>
					<button id="saveBtn" class="k_common_button" style="margin-left:50px"><i class="fa fa fa-check"></i><span>[(${Lang.common_save})]</span></button>
					<button id="bakBtn" class="k_common_button" style="margin-left:50px"><i class="fa fa fa-reply-all"></i><span>[(${Lang.common_goback})]</span></button>
				</h1>
				<div id="func_list">
				</div>
			</div>
		</div>
</div>
<script type="application/javascript" th:inline="javascript">
	var treeIns,$tree,$list,currentMenuIds,roleId = '[(${roleId})]';

	/**
	 * 根据菜单id列表加载功能
	 * 根据角色id加载角色拥有的菜单id集合对象
	 * **/
	function loadFunc(idList,callFn){
		currentMenuIds = idList;
		console.log(idList);
		$list.innerHTML="";
		var loading;
		if(!callFn){
			loading = $B.getLoadingEl();
			$B.DomUtils.append($list,loading);
		}
		$B.request({
			data:{ idList:idList.join(","),roleId:roleId },
			url: $B.getHttpHost(ctxPath)+"role/loadFunc?cmd=funcMrg",
			ok:function(message,res){
				var data = res.funcList;
				var roleFuncObj = res.roleFuncObj;
				var roleMenuObj = res.roleMenuObj;
				if(callFn){
					callFn(roleMenuObj);
				}
				if(data.length === 0){
					$list.innerHTML='<i class="fa fa-info-circle" style="padding-right:8px"></i>[(${Lang.common_noData})]';
				}else{
					var fragment = document.createDocumentFragment();
					var modelName,modeEl;
					for(var i = 0,len = data.length ;i < len ;++i){
						var checked = "";
						if(roleFuncObj[data[i].id]){
							checked = "checked";
						}
						var mTxt = data[i].extFeildsMap.menuText;
						if(modelName !== mTxt){
							modeEl = $B.DomUtils.createEl("<div class='f_model_div'><div class='fun_model_title' style='display: inline-block'><p>"+mTxt+"</p></div><div style='display: inline-block'></div></div>");
							console.log(modeEl);
							modelName = mTxt;
							fragment.appendChild(modeEl);
						}
						var $chk = $B.createEl('<label  style="line-height:30px" class="k_checkbox_label k_checkbox_anim">'
                        +'<input type="checkbox" '+checked+' value="'+data[i].id+'"  mid="'+data[i].menuId+'"/><i class="k_checkbox_i"></i>'+ data[i].funcDesc+'</label>');
						$B.DomUtils.append(modeEl.lastChild,$chk);
					}
					$B.DomUtils.append($list,fragment);
				}
			},
			fail:function(message){
				$list.innerHTML = "<p style='color: red'>"+message +"</p>";
			},
			onReturn:function () {
				$list.innerHTML="";
			}
		});
	}
	
	$B.DomUtils.onDomLoaded(function(){
		var menuJson = [(${menuJson})];	
		var treeJson = [{
			id:"",
			text:'所有',
			data:{},
			children:menuJson
		}];		
		$tree = document.getElementById("tree");
		$list = document.getElementById("func_list");

	    $B.DomUtils.click(document.getElementById("chkAll").firstChild,function () {
			var chk = this;
			var isChked = $B.DomUtils.attribute( chk,"checked");
			var childs = $list.children;
			console.log(childs);
			for(let i =0 ; i < childs.length ;i++){
                let $w = childs[i].lastChild.children;
                for(let j =0 ; j < $w.length ;j++) {
                    let $it = $w[j];
                    if($it.style.display !== "none"){
                        if(isChked){
                            $B.DomUtils.attribute( $it.firstChild,{"checked":true});
                        }else{
                            $B.DomUtils.attribute( $it.firstChild,{"checked":false});
                        }
                    }
                }
			}
		});
		var $btn = document.getElementById("saveBtn");
		$B.DomUtils.click($btn,function () {
			var saveData = [];
			var childs = $list.children ;
			for(let i =0 ; i < childs.length ;i++){
				let $w = childs[i].lastChild.children;
				for(let j =0 ; j < $w.length ;j++){
					let $it = $w[j];
					if($B.DomUtils.attribute($it.firstChild,"checked")){
						let fid = $it.firstChild.value;
						let mid =  $B.DomUtils.attribute($it.firstChild,"mid");
						saveData.push({funcId:fid,menuId:mid});
					}
				}
			}
			var strFunc = "";
			if(saveData.length > 0){
				strFunc = JSON.stringify(saveData);
			}
			var roleMenus = treeIns.getCheckData(true,true);
			var prs = {roleId:roleId,funcs:strFunc,menus:currentMenuIds.join(","),roleMenus:roleMenus.join(";")};
			console.log(prs);
			$B.request({
				data: prs,
				url:$B.getHttpHost(ctxPath)+"role/funcMrg",
				ok:function(msg,data){
					$B.success("[(${Lang.common_saveSucess})]",1.5);
				}
			},this);
		});

		//加载角色配置的功能及菜单
		var loading = $B.getLoadingEl();
		let li = $B.DomUtils.createEl("<li/>");
		$B.DomUtils.append(li, loading);
		$B.DomUtils.css(loading, { "padding-left": "6px" });
		$B.DomUtils.append($tree, li);
		loadFunc([],function (menuIdObj) {
			console.log("create menu tree go.......");
			$tree.innerHTML = "";
			treeIns = new $B.Tree($tree, {
				data: treeJson, //'数据'
				checkedColor:'#00B066',
				leafNodeIcon: 'fa-doc-text',                //子节点图标
				nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
				nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
				chkEmptyIcon: 'fa-check-empty',            //不选
				chkAllIcon: 'fa-check',            //全选
				chkSomeIcon: 'fa-minus-squared',              //部分选 ***/
				clickCheck:false,
				checkbox: true,
				onCreating:function(data,isParent){
					if(!isParent &&  menuIdObj[data.id]){
						data.checked = true;
					}
					if(isParent){
					    data.closed = false;
                    }
				},
				onClick: function (e, params) { //function (data) { },//点击事件
					var data = e.data;
					var idList = [];
					if(data[0].id !== ""){
						for(var i = 0 ,len = data.length ;i < len ;++i){
							idList.push(data[i].id);
						}
					}
					loadFunc(idList);
				}
			});
		});

		var bakBtn = document.getElementById("bakBtn");
		$B.DomUtils.click(bakBtn,function () {
			parent.$win.close();
		});
	});
</script>

</body>
</html>